<template>
    <div>
      <div style="margin-bottom: 5px">
           <!-- 专业id -->
        <el-input
          v-model="postId"
          @keyup.enter.native="queryId"
          placeholder="请输入帖子id"
          suffix-icon="el-icon-search"
          style="width: 190px; margin-left: 5px"
        ></el-input>
              <!--      查询按钮-->
              <el-button type="primary" style="margin-left: 5px" @click="queryId">id查询</el-button>
              <!--      重置按钮-->
              <el-button type="success" @click="resetParam">重置</el-button>
          </div>
        <!--    列表展示-->
        <el-table :data="subAll" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
            <el-table-column prop="id" label="子评论id" width="200" header-align="center"> </el-table-column>
            <el-table-column prop="userName" label="用户名称" width="80"></el-table-column>
            <el-table-column prop="userId" label="用户id" width="200"></el-table-column>
            <el-table-column prop="postId" label="帖子id" width="200">
            </el-table-column>
            <el-table-column label="评论图片" width="200" header-align="center">
                <template slot-scope="scope">
                    <el-image style="width: 200px; height: 50px" :src="scope.row.contentImage" fit="contain"
                        :preview-src-list="[scope.row.contentImage]"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" width="200" header-align="center"></el-table-column>
            <el-table-column prop="isPrivate" label="是否公开" width="80">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.gender === false ? 'primary' : 'success'" disable-transitions>{{
                        scope.row.gender === false ? "未公开" : "已公开" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="gmtCreate" label="创建时间" width="140">
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                        title="这是一段内容确定删除吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
  
        <!--    分页  -->
        <div class="pagination-wrapper">
            <div class="pagination-container">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[5, 10, 20, 30]" :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import { queryId } from "@/api/q&aService/subComment/queryId";
  import {  del } from "@/api/q&aService/subComment/Delete";
  import { queryAllSon } from "@/api/q&aService/subComment/queryAllSon";
  
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "subComment",
    data() {
        return {
          subAll: [],
            form: {
              id:'',
              postId: "",
            },
            postId: "",
            id:'',
            page: 1,
            limit: 5,
            total: 0,
        };
    },
  
    methods: {
        //删除
        del(id) {
            del(id).then((res) => {
                if (res.code === 20000) {
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.queryPsot();
                } else {
                  console.log(res);
                  
                    this.$message({
                        message: "删除失败",
                        type: "error",
                    });
                }
            });
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(() => {
                    done();
                })
                .catch(() => { });
        },
        handleSizeChange(val) {
            this.page = 1;
            this.limit = val;
            this.queryPsot();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.queryPsot();
        },
        resetParam() {
            this.postId = '';
            this.queryPsot();
        },
        //查询所有帖子
        queryPsot() {
            queryAllSon(this.page, this.limit, this.form).then((res) => {
                if (res.code === 20000) {
                    this.total = res.data.page.total;
                    this.subAll = res.data.page.records;
                }
            });
        },
        queryId(){
          queryId(this.page,this.limit,this.postId).then((res) => {
              if(res.code === 20000){
                console.log(res);
                
                this.subAll = res.data.page.records;
              }
          })
        }
    },
    mounted() {
        this.queryPsot();
    },
  };
  </script>
  
  <style scoped></style>